<!DOCTYPE html>
<html>

 <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Durak</title>
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
    <link rel="stylesheet" href="css/UI.css" type="text/css" media="screen"/>
	<script src="js/jquery-1.8.2.js"></script>
	<script src="js/jquery-ui-1.9.0.custom.js"></script>
	<script src="js/jquery.redirect.min.js"></script>
	<script src="js/active-game.js"></script>
</head>

<body>

	<div id="container">
		<div id=messages>
			
		</div> 
		<div id="players">
			<div class="player">
			<command style="margin-left:20%;"></command>
			<img src="images/Player.png"/><img class="backCardSize" src="images/BACK_OF_CARD.jpg"/>
			</div>
			<div class="player">
			<command style="margin-left:10%;"></command>
 			<img src="images/Player.png"/><img class="backCardSize" src="images/BACK_OF_CARD.jpg"/>
 			</div>
 			<div class="player">
 			<command style="margin-left:10%;"></command>
			<img src="images/Player.png"/><img class="backCardSize" src="images/BACK_OF_CARD.jpg"/>
			</div>
			<img class="durakIcon" src="images/DurakIcon.png"/>
		</div>

		<div id="scoreBoard">
			<b>ScoreBoard</b>
		</div>

		<div id="table">
			<div id="attack_cards">
				<div class="attackCardDiv" id="attackCardDiv0"></div>
				<div class="attackCardDiv" id="attackCardDiv1"></div>
				<div class="attackCardDiv "id="attackCardDiv2"></div>
				<div class="attackCardDiv" id="attackCardDiv3"></div>
				<div class="attackCardDiv" id="attackCardDiv4"></div>
				<div class="attackCardDiv" id="attackCardDiv5"></div>
			</div>
			<div id="defend_cards">
				<div class="defendCardDiv" id="defendCardDiv0"></div>
				<div class="defendCardDiv" id="defendCardDiv1"></div>
				<div class="defendCardDiv" id="defendCardDiv2"></div>
				<div class="defendCardDiv" id="defendCardDiv3"></div>
				<div class="defendCardDiv" id="defendCardDiv4"></div>
				<div class="defendCardDiv" id="defendCardDiv5"></div>
			</div>
		</div>
		
		<div id="deckDiv">
				<div><img id="stack" class="cardSize"  src="images/BACK_OF_CARD.jpg"/></div>
				<div id="kozar_card"><img class="cardSize" src="images/ACE_HEARTS.png"/></div>
				<div id="deckSize"></div>
		</div>

		<div id="actionButtons">
			
			<button id="attackButton" class="actionButton ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only ui-state-hover" role="button" aria-disabled="false">
			<span class="ui-button-text">Attack! </span>
			</button>
			
			<button id="withdrawButton" class="actionButton ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only ui-state-hover" role="button" aria-disabled="false">
			<span class="ui-button-text">Withdraw</span>
			</button>
			
			<button id="defendButton" class="actionButton ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only ui-state-hover" role="button" aria-disabled="false">
			<span class="ui-button-text">Defend   </span>
			</button>
			
			<button id="passAttackButton" class="actionButton ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only ui-state-hover" role="button" aria-disabled="false">
			<span class="ui-button-text">Pass Attack</span>
			</button>
		</div>

		<div id="hand">
		</div>
		<div id="waitingOnPlayers" class="ui-dialog-content ui-widget-content" ></div>
	</div>